<template>
  <div id="album">
    <template v-for="item in albumArr">
      <div class="album_box" v-if="item.picUrl" :key="item.id">
        <!-- 顶部 -->
        <div class="album_top">
          <img :src="item.picUrl" alt="" />
          <img src="https://s3.music.126.net/mobile-new/img/album@2x.png?4d5d63fbc459c8e2f7dddead07514fba=" alt="" class="bgi">
          <div class="top_right">
            <h2>{{ item.name }}</h2>
            <template v-for="a in item.artists">
              <div :key="a.name">
                <div>
                  <span>歌手：</span>
                  <a href="#">{{ a.name }}</a>
                  
                  
                </div>
                <div>发行时间:{{ getNewTime(item.publishTime) }}</div>
              </div>
            </template>
          </div>
        </div>
        <!-- 简介 -->
        <!-- <div class="introduce" @click="yincang(hidden)" :class="{active:hidden==isActive}" > -->
        <div class="introduce" :class="{ a: isActive }" @click="yincang">
          <div>
            <span>简介：</span>
            <br />
            <span> {{ item.description }}</span>
          </div>
        </div>
        <!-- 歌曲 -->
        <template v-for="(b, index) in item.artists">
          <div class="song" :key="b.name">
            <div class="song_top">歌曲列表</div>
            <div class="song_main">
              <!-- 序号 -->
              <div class="main_left">{{ index + 1 }}</div>
              <!-- 歌名-歌手 -->
              <div class="main_middle">
                <h2>{{ item.name }}</h2>
                <div>{{ b.name }} - {{ item.name }}</div>
              </div>
              <!-- 播放按钮 -->
              <i class="iconfont icon-bofang main_right"></i>
            </div>
          </div>
        </template>

        <div class="album_footer">
          
          <div class="pinglun">最新评论{{ item.total }}</div>

          <par :parArr="parArr" :time="getPlTime"></par>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import par from "../components/Par_t.vue";
export default {
  data: function () {
    return {
      albumArr: [],
      parArr: [],
      plArr: [],
      isActive: true,

      // singerArr:[],
    };
  },
  methods: {
    getNewTime(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}-${month}-${day}`;
    },
    getPlTime(a) {
      let date = new Date(a);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}年${month}月${day}日`;
    },
    yincang() {
      this.isActive = !this.isActive;
      console.log(this.isActive);
      // console.log("123");
    },
  },
  async mounted() {
    let res = await this._axios.get("/album?id=130240363");
    console.log(res);
    this.albumArr = res.data;
    console.log(this.albumArr);

    let pes = await this._axios.get("/comment/album?id=130240363");
    console.log(pes);
    this.parArr = pes.data.comments;
    this.plArr = pes.data;
    console.log(this.parArr);
    console.log("plarr", this.plArr);
  },
  components: {
    par,
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
#album {
  .album_box {
    background-color: rgba(124, 111, 111, 0.7);
    // background-image:url(//music.163.com/api/img/blur/109951166171624380?param=170y170);
    height: _vw(400);
    margin-bottom: _vw(500);
    .album_top {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: _vw(90);
      // background-image: url(
      //   ../assets/bgi.jpeg
      // );
      //  overflow: hidden;
      > img:first-child {
        padding-top: _vw(80);
        padding-left: _vw(40);
        width: _vw(252);
        z-index: 3;
           
      }
      >.bgi{
        position: absolute;
        width: _vw(252);
        left: _vw(68);
        top: _vw(90);
        // padding-right: _vw(300);
      }
      > .top_right {
        margin-right: _vw(180);
        margin-top: _vw(40);
        > h2 {
          margin-bottom:_vw(40) ;
          font-size: _vw(34);
          color: white;
        }
        > div {
          // padding-bottom:_vw(100) ;
          > div:nth-child(1) {
            margin-bottom: _vw(10);
            > span {
              color: hsla(0, 0%, 100%, 0.5);
              
            }
            > a {
              color: white;
            }
          }
          > div:nth-child(2) {
            color: hsla(0, 0%, 100%, 0.5);
            font-size: _vw(24);
          }
        }
      }
    }
    .a {
      overflow: hidden;
      // text-overflow:ellipsis;
      // white-space: nowrap;

      height: _vw(160);
    }
    .introduce {
      margin-top: _vw(10);
      //  overflow: hidden;
      //   text-overflow:ellipsis;
      white-space: none;
      > div {
        color: #666;
        font-size: _vw(28);
      }
    }
    .song {
      margin-bottom: _vw(20);
      > .song_top {
        padding: 0 _vw(20);
        //  width: 100%;
        height: _vw(46);
        line-height: _vw(46);
        background-color: #eeeff0;
        font-size: _vw(24);
        color: #666;
      }
      > .song_main {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-left: _vw(20);
        > .main_left {
          width: 5%;
          color: #999;
          font-size: _vw(34);
          margin-left: _vw(10);
        }
        > .main_middle {
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          width: 90%;
          margin-left: _vw(10);
          > h2 {
            font-size: _vw(34);
          }
          > div {
            font-size: _vw(24);
            color: #888;
          }
        }
        > i {
          //  width: 5%;
          font-size: _vw(40);
          margin-right: _vw(10);
          color: #999;
        }
      }
    }
    .album_footer {
      .pinglun {
        padding: 0 _vw(20);
        //  width: 100%;
        height: _vw(46);
        line-height: _vw(46);
        background-color: #eeeff0;
        font-size: _vw(24);
        color: #666;
      }
    }
  }
}
</style>